<template>
    <div class="login">
        <el-form label-width="100px" class="login_form" ref="form" :rules="rules" :model="form">
            <el-form-item>
                <h1>医院后勤综合运营平台</h1>
            </el-form-item>
            <el-form-item prop="username">
                <el-input placeholder="请输入账号" v-model="form.username">
                    <template slot="prepend">
                        <i class="el-icon-user-solid"></i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="form.password">
                    <template slot="prepend">
                        <i class="el-icon-lock"></i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width: 100%" @click="toLogin">登录</el-button>
            </el-form-item>
        </el-form>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                username: "",
                password: "",
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入账号",
                        trigger: "blur",
                        min: 3,
                        max: 10,
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur",
                        min: 5,
                        max: 12,
                    },
                ],
            },
        };
    },
    methods: {
        // 登录
        toLogin() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$router.push("/layout")
                } else {
                    this.$Message.error("请输入正确的账号和密码")
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.login_form {
    width: 400px;
    margin: 200px auto;

    h1 {
        text-align: center;
    }
}
</style>
